
<template>
<div class="gender detailedParent">
  <div class="detailed"><img src="../../../public/detailed.svg" alt="放大" @click="showDetail"></div>
  <div id="gender-main"></div>
</div>

  <el-dialog v-model="dialogVisible" title="图表详情" width="80vw" height="height">
    <div>
      <DetailedGender></DetailedGender>
    </div>
  </el-dialog>
</template>

<style scoped>
.gender{
  width: 100%;
  height: 100%;
}
#gender-main{
  width: 100%;
  height: 100%;
}
</style>

<script setup>
import {onMounted,ref} from "vue";
import * as echarts from 'echarts';
import DetailedGender from "@/components/DemographicCharacteristics/detailed/DetailedGender.vue";
import emitter from "@/utils/emitter.js";
import {detailedGender} from "@/consts/eventName.js";
import {useDetailedStore} from "@/store/useDetailedStore.js";
import axios from "axios";
import {getGenderByYear} from "@/api/gender.js";
import theme from "../../../static/theme/walden.json"

let chartDom
let myChart
let option


let dialogVisible = ref(false)

let useDetailStore = useDetailedStore()

let initYear = 2023

onMounted(()=>{
  chartDom = document.getElementById('gender-main');
  myChart = echarts.init(chartDom,theme);


  getGenderByYear(initYear).then((value)=>{
    let data = value.data
    let xAxis = []
    let seriesData = []

    data.forEach((item)=>{
      const jsonMap = new Map(Object.entries(item))

      xAxis.push(jsonMap.keys().next().value)
      seriesData.push(jsonMap.values().next().value)
    })

    return {
      xAxis:xAxis,
      seriesData:seriesData
    }
    
  }).then((value)=>{
    console.log(value)
    option = {
      title: {
        text: '性别比例',
        textStyle: {
          fontSize:15 // 设置标题字体大小
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: value.xAxis
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '男女比例',
          type: 'line',
          stack: 'Total',
          data: value.seriesData
        },
      ]
    };

    useDetailStore.detailedData.set(detailedGender,value)

    option && myChart.setOption(option);

  })

})

function showDetail(){
  dialogVisible.value = true
}

</script>